<template>
	<view>
		<view class="status_bar01"></view>
		<view class="head">
			<!-- <view class="left-select iconfont22" style="color: #FFFFFF;">&#xe623;</view> -->
			<view class="title">
				<text>商品分类</text>
			</view>
		</view>
		<view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(110vh - 230upx)">
				<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list" :key="index" @tap="TabSelect"
				 :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(110vh - 200upx)"
			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
				<view class="padding-top padding-lr" v-for="(item,index) in list" :key="index" :id="'main-'+index">
					<view class="cu-bar solid-bottom bg-white" style="position: relative;">
						<view class="action">
							<text class="cuIcon-title text-green" style="color:#4d726f;"></text> {{item.name}}
						</view>
						<view class="all" :data-url="'/pages/list/list?cid='+item.cid" @click="gotopage">全部</view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="goods_box">	
							<block v-for="(c,i) in item.c" :key="i" >		
							<view class="goods" :data-url="'/pages/list/list?cid='+c.cid" @click="gotopage">
								<image :src="c.image" mode=""></image>
								<view class="text" style="display: -webkit-box;
								  -webkit-box-orient: vertical;
								  -webkit-line-clamp: 2;
								  overflow: hidden;">{{c.name}}</view>
							</view>								
					</block>	
						</view>
						
					</view>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			kw:'',
			list: [],
			tabCur: 0,
			mainCur: 0,
			verticalNavTop: 0,
			load: true,
			f:false
			
			
		};
	},
	onLoad() {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		  let list = [{}];
		// for (let i = 0; i < 26; i++) {
		// 	list[i] = {};
		// 	list[i].name = String.fromCharCode(65 + i);
		// 	list[i].id = i;
		// }
		// this.list = list;
		// this.listCur = list[0];
	
		let _this = this;
	
			_this.Net._get('category_new', null, res => {
				for (let i = 0; i < res.data.length; i++) {
					
					list[i] = {};
					
					list[i].name = res.data[i].name;
					list[i].id = i;
					list[i].cid = res.data[i].cid;
					list[i].c = res.data[i].child;
				}
				_this.list = list;
				_this.listCur = list[0];
			// 	_this.list = res.data;	
			 	console.log(list)
			// _this.listCur = res.data[0];
				//_this.canCalc = true;
			});
			
	},
	onShareAppMessage(res) {
	            console.log("分享", res)
	      
	            return{
	                title: "汉家承",
	                path: "/pages/index/index",
	                imageUrl: '',
	                desc: "",
	                content: "",
	                success(res){
	                    uni.showToast({
	                        title:'分享成功'
	                    })
	                },
	                fail(res){
	                    uni.showToast({
	                        title:'分享失败',
	                        icon:'none'
	                    })
	                }
	            }
	        },
			onShareTimeline(res) {
			            console.log("分享", res)
			      
			            return{
			                title: "汉家承",
			                path: "/pages/index/index",
			                imageUrl: '',
			                desc: " ",
			                content: " ",
			                success(res){
			                    uni.showToast({
			                        title:'分享成功'
			                    })
			                },
			                fail(res){
			                    uni.showToast({
			                        title:'分享失败',
			                        icon:'none'
			                    })
			                }
			            }
			        },
	onReady() {
		uni.hideLoading()
		  
	},
	methods: {
		onPullDownRefresh() {
			let _this = this; // 下拉监听事件
			  let list = [{}];
			console.log('refresh');
			setTimeout(function() {
					uni.stopPullDownRefresh();
	_this.Net._get('category', null, res => {
		for (let i = 0; i < res.data.length; i++) {
			list[i] = {};
			list[i].name = res.data[i].name;
			list[i].id = i;
			list[i].c = res.data[i].child;
		}
		_this.list = list;
		_this.listCur = list[0];
	// 	_this.list = res.data;	
	 	console.log(list)
	// _this.listCur = res.data[0];
		//_this.canCalc = true;
	});
			}, 500);
		},
		search(e) {
			var that=this
			if(!that.kw)
			{
				that.Msg.Fail('请输入要搜索的产品');
				return
			}
			uni.navigateTo({
				url:'/pages/list/list?kw='+that.kw
			})
		},
		TabSelect(e) {
			this.tabCur = e.currentTarget.dataset.id;
			this.mainCur = e.currentTarget.dataset.id;
			this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			this.f=true
		},
		VerticalMain(e) {
			// #ifdef MP-ALIPAY
			   return false  //支付宝小程序暂时不支持双向联动 
			// #endif
			let that = this;
			let tabHeight = 0;
			if (this.load) {
				for (let i = 0; i < this.list.length; i++) {
					let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
					console.log(view)
					view.fields({
						size: true
					}, data => {
						this.list[i].top = tabHeight;
						tabHeight = tabHeight + data.height;
						this.list[i].bottom = tabHeight;
						 
					}).exec();
				}
				this.load = false
			}
			let scrollTop = e.detail.scrollTop + 10;
		
		
			for (let i = 0; i < this.list.length; i++) {
				if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
					this.verticalNavTop = (this.list[i].id - 1) * 50
					if(this.tabCur>this.list[i].id && this.f)
					{
						this.f=false
						return false
					}
					this.tabCur = this.list[i].id
					return false
				}
			
			}
		},	
		gotopage(e){
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url:url
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
		padding-bottom: 0 !important;
		background: #F8F8F8;
	}
	.head {
		width: 100%;
		position: fixed;
		top:0;
		z-index: 9;
		padding-top: 30upx;
		padding-bottom: 10upx;
		background-color: #4d726f;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.head .title {
		color: #fff;
		text-align: center;
		width: 100%;
		height: 12vw;
		line-height: 12vw;
		font-size: 36upx;
	}
	.left-select{
		 position: relative;
		 left:40upx;
		 top:6upx;
		 font-size: 42upx;
	}
	.fixed {
		position: fixed;
		z-index: 99;
	}
	
	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}
	
	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		margin: 0;
		border: none;
		color: #3D3D47;
		font-size: 28upx;
		height: 50px;
		line-height: 50px;
		position: relative;
		font-weight: bold;
	}
	
	.VerticalNav.nav .cu-item.cur {
		background-color: #ffffff;
		font-size:34upx;
		font-weight: bold;
		color: #333;
	}
	
	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 6upx;
		height: 36upx;
		border-radius: 20px;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		margin: auto;
		background-color: #4d726f;
	}
	
	.VerticalBox {
		display: flex;
		padding-top: 120upx;
	}
	
	.VerticalMain {
		background: #F8F8F8;
		flex: 1;
		padding-bottom: 12vh;
	}
	
	.VerticalNav{
		padding-top: 15px;
	}
	
	.goods_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
		padding-bottom: 20rpx;
	}
	
	.goods_box::after {
		flex: auto;
		content: "";
	}
	
	.goods_box .goods {
		width: 33.3%;	
		flex-basis: auto;
		margin-top: 7%;
		text-align: center;
	}
	
	.goods_box .goods image{
		width: 60px;
		height: 60px;
		border-radius: 10rpx;
	}
	
	.goods_box .goods .text{
		width: calc(100% - 6%);
		padding: 0 3%;
		margin-top: 10px;
		font-size: 3vw;
		color: #333;
	}
	


	.all{
		position: absolute;
		right: 20rpx;
		font-size: 24rpx;
		color: #999999;
		top: 50%;
		transform: translateY(-50%);
	}
</style>
